/*
  学习目标：父传子技术
  步骤：
    1. 给子组件标签设置标签数据
    2. 子组件通过props去接收
*/

// 导入react和react-dom
import React from 'react';
import ReactDom from 'react-dom/client';

class Handler extends React.Component {
  state = {
    money: 20000,
  };
  handleClickMoney = () => {
    this.setState({
      money: this.state.money + 1000,
    });
  };
  render() {
    return (
      <div>
        <button onClick={this.handleClickMoney}>父亲开始赚钱</button>
        {/* 1.传递数据给子组件 */}
        <Child money={this.state.money}></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    // 2.类组件通过this.props接受
    console.log('this.props----->', this.props);
    const { money } = this.props;
    return (
      <div>
        {/* <h3>父亲给我钱了：{this.props.money}</h3> */}
        <h3>父亲给我钱了：{money}</h3>
      </div>
    );
  }
}

// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
